<template>
    <!-- <div style="color: red;">主页</div> -->

    <load-more 
        :pageIndex="pageIndex" 
        :pageSize="pageSize" 
        :totalCount="totalCount" 
        :openRefresh="true"

        @refresh="refresh"
        @loadmore="loadmore" >

        <!-- 使用了默认 <Slot> -->

        <!-- 调用组件渲染 -->
        <div v-for="mv in movies" :key="mv.id">
            <Card :name="mv.name" :len="mv.len" :url="mv.url" :type="mv.type"></Card>
        </div>
    </load-more>
        
</template>

<script>
import img from "../assets/pic06.jpg"
import Card from "../components/Card.vue"

export default{
    components:{
        Card,
    },
    // 属性
    data(){
        return {
            movies: [
                {id:1, type:"混剪", len: `03'14"`, name:"电影慢镜头混剪【看见镜头的美】", url: img},
                {id:2, type:"混剪", len: `03'14"`, name:"电影慢镜头混剪【看见镜头的美】", url: img},
                {id:3, type:"混剪", len: `03'14"`, name:"电影慢镜头混剪【看见镜头的美】", url: img},
                {id:4, type:"混剪", len: `03'14"`, name:"电影慢镜头混剪【看见镜头的美】", url: img},
                {id:5, type:"混剪", len: `03'14"`, name:"电影慢镜头混剪【看见镜头的美】", url: img},
            ],

            // 上滑无限滚动加载更多 组件
            pageIndex: 1,
            pageSize: 10,
            totalCount: 100,
        }
    },
    //
    // 方法
    methods:{
        loadmore(pageIndex){
            console.log("加载更多。",  pageIndex);
            this.pageIndex = pageIndex

            let newData = [
                {id:1, type:"混剪"+pageIndex, len: `03'14"`, name:"电影慢镜头混剪【看见镜头的美】", url: img},
                {id:2, type:"混剪"+pageIndex, len: `03'14"`, name:"电影慢镜头混剪【看见镜头的美】", url: img},
                {id:3, type:"混剪"+pageIndex, len: `03'14"`, name:"电影慢镜头混剪【看见镜头的美】", url: img},
                {id:4, type:"混剪"+pageIndex, len: `03'14"`, name:"电影慢镜头混剪【看见镜头的美】", url: img},
                {id:5, type:"混剪"+pageIndex, len: `03'14"`, name:"电影慢镜头混剪【看见镜头的美】", url: img},

            ]
            this.movies = this.movies.concat(newData)
        },
        refresh(){
            console.log("下拉刷新。")
        }
    }
}
</script>

<style lang="scss">
    
</style>